<template>
  <div class="cooperator">
    <div class="title">
      <transition name="slide-fade">
        <div v-show="caseShow">
          提高安全性的创新解决方案， 可持续发展和生产力
        </div>
      </transition>
    </div>
    <div class="cooperator_box">
      <div class="img_box" :class="[caseShow ? 'active' : '']">
        <img src="@/assets/img/bg_1.jpg" />
        <p>环境、健康、安全和可持续性</p>
        <span>
          运营风险管理软件可以帮助运营商制定一个统一的战略，从而在整个行业内推动卓越运营。</span
        >
      </div>

      <div class="img_box" :class="[caseShow ? 'active1' : '']">
        <img src="@/assets/img/bg_2.jpg" />
        <p>业务风险管理</p>
        <span
          >运营风险管理软件帮助运营商制定统一的战略，从而推动整个企业的卓越运营。</span
        >
      </div>

      <div class="img_box" :class="[caseShow ? 'active2' : '']">
        <img src="@/assets/img/bg_3.jpg" />
        <p>产品管理</p>
        <span
          >产品监管软件将最佳的软件工具与广泛而深入的内容相结合，使您能够在整个生命周期内遵守、简化和自动化流程。</span
        >
      </div>

      <div class="img_box" :class="[caseShow ? 'active3' : '']">
        <img src="@/assets/img/bg_4.jpg" />
        <p>可持续发展顾问服务</p>
        <span
          >可持续发展咨询服务支持所有行业的公司，帮助他们解决其独特的环境和可持续发展需求。</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["caseShow"],
  data() {
    return {};
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .cooperator {
    width: 1200px;
    margin: 0 auto;
    .title {
      font-weight: 400;
      font-size: 52px !important;
      line-height: 60px !important;
      margin: 100px 0 80px;
      color: #000;
    }
    .cooperator_box {
      display: flex;
      flex-direction: row;
      .img_box {
        position: relative;
        width: 25%;
        padding: 0 0 80px;
        margin: 0 8px;
        //   height: 500px;
        /* 子元素 .box>div 保持3d空间 */
        transform-style: preserve-3d;
        //    rotateX(-45deg) translateY(120px);
        transform: rotateY(30deg) rotateX(50deg);
        opacity: 0;
        transition: 1s cubic-bezier(0.65, 0, 0.35, 1);
        box-shadow: 0px 10px 50px rgb(221, 220, 220);
        //   border: 1px solid #ccc;
        img {
          width: 100%;
          height: 200px;
        }
        p {
          padding: 0 20px;
          font-size: 26px;
          margin-top: 10px;
          line-height: 36px;
          text-align: left;
          font-weight: 700 !important;
        }
        span {
          padding: 0 20px;
          font-size: 16px;
          margin-top: 10px;
          line-height: 26px;
          display: block;
          text-align: left;
        }
      }
    }
  }
}
@media screen and (min-width: 993px) and (max-width: 1199px) {
 .cooperator {
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
    .title {
      font-weight: 400;
      font-size: 40px !important;
      padding:  0 60px;
      margin: 60px 0 80px;
      color: #000;
    }
    .cooperator_box {
      display: flex;
      flex-direction: row;
      .img_box {
        position: relative;
        width: 25%;
        padding: 0 0 80px;
        margin: 0 8px;
        //   height: 500px;
        /* 子元素 .box>div 保持3d空间 */
        transform-style: preserve-3d;
        //    rotateX(-45deg) translateY(120px);
        transform: rotateY(30deg) rotateX(50deg);
        opacity: 0;
        transition: 1s cubic-bezier(0.65, 0, 0.35, 1);
        box-shadow: 0px 10px 50px rgb(221, 220, 220);
        //   border: 1px solid #ccc;
        img {
          width: 100%;
          height: 200px;
        }
        p {
          padding: 0 20px;
          font-size: 26px;
          margin-top: 10px;
          line-height: 36px;
          text-align: left;
          font-weight: 700 !important;
        }
        span {
          padding: 0 20px;
          font-size: 16px;
          margin-top: 10px;
          line-height: 26px;
          display: block;
          text-align: left;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
   .cooperator {
    width: 100%;
    margin: 0 auto;
    .title {
      font-weight: 400;
      font-size: 22px !important;
      line-height: 30px !important;
      padding:  0 20px;
      margin: 30px 0 30px;
      color: #000;
    }
    .cooperator_box {
      background: #fff;
      display: flex;
      flex-direction: column;
      .img_box {
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        // width: 100%;
        padding: 0 0 80px;
        margin: 10px 10px;
        //   height: 500px;
        /* 子元素 .box>div 保持3d空间 */
        transform-style: preserve-3d;
        //    rotateX(-45deg) translateY(120px);
        transform: rotateY(30deg) rotateX(50deg);
        opacity: 0;
        transition: 1s cubic-bezier(0.65, 0, 0.35, 1);
        box-shadow: 0px 10px 50px rgb(221, 220, 220);
        //   border: 1px solid #ccc;
        img {
          width: 100%;
          height: 300px;
          object-fit: cover
        }
        p {
          padding: 0 20px;
          font-size: 20px;
          margin-top: 10px;
          line-height: 36px;
          text-align: left;
          color: #000;
          // font-weight: 700 !important;
        }
        span {
          padding: 0 20px;
          font-size: 16px;
          margin-top: 10px;
          line-height: 26px;
          display: block;
          text-align: left;
        }
      }
    }
  }
}
@media screen and (max-width: 767px) {
  .cooperator {
    width: 100%;
    margin: 0 auto;
    background: #fff;
    .title {
      font-weight: 400;
      font-size: 22px !important;
      line-height: 30px !important;
      padding:  30px 20px;
      // margin: 30px 0 30px;
      color: #000;
    }
    .cooperator_box {
      background: #fff;
      display: flex;
      flex-direction: column;
      .img_box {
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        // width: 100%;
        padding: 0 0 80px;
        margin: 10px 10px;
        //   height: 500px;
        /* 子元素 .box>div 保持3d空间 */
        transform-style: preserve-3d;
        //    rotateX(-45deg) translateY(120px);
        transform: rotateY(30deg) rotateX(50deg);
        opacity: 0;
        transition: 1s cubic-bezier(0.65, 0, 0.35, 1);
        box-shadow: 0px 10px 50px rgb(221, 220, 220);
        //   border: 1px solid #ccc;
        img {
          width: 100%;
          height: 200px;
             object-fit: cover
        }
        p {
          padding: 0 20px;
          font-size: 20px;
          margin-top: 10px;
          line-height: 36px;
          text-align: left;
          color: #000;
          // font-weight: 700 !important;
        }
        span {
          padding: 0 20px;
          font-size: 16px;
          margin-top: 10px;
          line-height: 26px;
          display: block;
          text-align: left;
        }
      }
    }
  }
}
.active {
  opacity: 1 !important;
  transition: all 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0s !important;
  transform: rotateY(0) !important;
  z-index: 11 !important;
}
.active1 {
  opacity: 1 !important;
  transition: all 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.3s !important;
  transform: rotateY(0) !important;
  z-index: 22 !important;
}
.active2 {
  opacity: 1 !important;
  transition: all 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.6s !important;
  transform: rotateY(0) !important;
  z-index: 33 !important;
}
.active3 {
  opacity: 1 !important;
  transition: all 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.9s !important;
  transform: rotateY(0) !important;
  z-index: 44 !important;
}
</style>